<template>
    <view class="home-container">

        <view class="topImage">
            <view class="topBox">
                <view>XXX服务 </view>
                <view>
                    <span>专业团队</span>
                    <span>极速出签</span>
                    <span>智能申请</span>
                </view>
            </view>
        </view>
        <view class="cardBox">
            <view class="cardItem card1"  @click="gotoPage('/subPackages/remould/applyForm')" >
                <view>啦啦啦啦</view>
                <view class="imgBox">
                    <image src="../../static/applyFor.png"></image>
                </view>
            </view>
            <view class="cardItem card1">
                <view>啦啦啦啦</view>
                <view class="imgBox">
                    <image src="../../static/order.png"></image>
                </view>
            </view>
        </view>
        <!-- <view @click="gotoPage('/pages/login/login')">登录</view> -->
        <!-- <u-popup :show="showTypeBox" mode="bottom" @close="close" @open="open">
            <view class="typeBox">
                <view @click="gotoPage('/personalCenter/addForm')">
                    <view>标准办理</view>
                    <view>72小时</view>
                    <view>￥499</view>
                </view>
                <view>
                    <view>快速通道</view>
                    <view>24小时</view>
                    <view>￥559</view>
                </view>
                <view>
                    <view>团队速惠</view>
                    <view>24小时</view>
                    <view>￥519</view>
                </view>
            </view>
        </u-popup> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            showTypeBox: false
        }
    },
    onShow(options) {
        // this.getData()
    },
    methods: {
        getData() {
            uni.showLoading({
                mask: true,
            })
            this.$asynApi.getStaticData().then(res => {
                uni.hideLoading()
                if (res.code === 200 && res.data) {
                    this.list = res.data
                }
            })
        },

        // 跳转页面
        toPage(url, verifyToken) {
            if (verifyToken == 'verifyToken') {
                if (uni.getStorageSync('userInfos').token) {
                    uni.navigateTo({
                        url: url,
                    })
                }
                else {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    setTimeout(val => {
                        uni.clearStorage()
                        uni.navigateTo({
                            url: '/pages/login/login',
                        })
                    }, 2000)
                }
            }
        },

        gotoPage(url) {
            uni.navigateTo({
                url: url,
            })
        },
        gotoPageURl() {
            uni.navigateTo({
                url: "/pages/login/shop"
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.status-bar {
    // height: var(--status-bar-height);
    width: 100%;
}

.home-container {
    .topImage {
        background: url("../../static/top.png") no-repeat top;
        background-size: 100% 100%;
        width: 100vw;
        height: 350rpx;
        color: #fff;
        .topBox {
            padding: 50rpx;
            view:nth-child(1) {
                font-size: 60rpx;
                letter-spacing: 2rpx;
                font-weight: 600;
                line-height: 2;
            }
            span {
                margin-right: 10rpx;
            }
        }
        // padding: ;
    }
    .cardBox {
        padding: 80rpx 80rpx;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        color: #555;
        font-weight: 600;
        font-size: 32rpx;
        letter-spacing: 2rpx;
        .cardItem {
            border-radius: 15rpx;
            padding: 60rpx 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 1;
            background: url("../../static/bg.png");
            background-size: 100% 100%;
            // width: calc(100% - 60rpx);
            width:100%;
            box-shadow: 0rpx 4rpx 15rpx 3rpx rgba(0, 0, 0, 0.281);
            border: #fff 2rpx solid;
            margin-bottom: 80rpx;
            .imgBox {
                width: 100rpx;
                height: 100rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #447efaa8;
                border-radius: 50%;
                image {
                    width: 50rpx;
                    height: 50rpx;
                }
            }
        }
    }
    .typeBox {
        padding: 30rpx;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>